<template>
	<view class="container coupon-detail-container">
		<view class="page-status">待使用</view>
		<view class="page-date">{{getValidTime()}}</view>
		<view class="qrcode-panel">
			<view class="panel-title">到店验劵</view>
			<image class="qr-img" :src="qrcodeInfo" mode="widthFix"></image>
			<view class="qr-code">券码：{{pageData.couponCode}}</view>
		</view>
		<view class="list-panel">
			<view class="panel-title">适用门店（{{pageList.length}}家）</view>
			<view class="page-list" v-for="item in pageList" :key="item.id">
				<view class="list-top">
					<image class="list-img" :src="item.headPortrait" mode="widthFix"
						@error="$handleImageError(item,'headPortrait')"></image>
					<view class="list-right">
						<view class="list-title">{{item.name}}</view>
						<view class="list-info">
							<text class="list-type">{{item.institutionalType}}</text>
							<text class="list-info-words">医馆规模：{{item.hospitalScale}}人</text>
						</view>
						<view class="list-addr">
							<text class="list-addrinfo iconfont" @click="openLocation(item)">{{item.hospitalSite}}
								&#xe775;</text>
							<text class="list-addrdist">{{item.distanceText || '-'}}</text>
						</view>
					</view>
				</view>
				<view class="list-bottom">
					{{item.hospitalFeature}}
				</view>
			</view>
		</view>
		<view class="not-more" v-if="isLoading">加载中...</view>
		<view class="null-page" v-else-if="pageList.length<=0 ">
			<text class="iconfont">&#xe642;</text>
			<view class="null-page-tips">暂无数据~</view>
		</view>
		<view class="not-more" v-else-if="notMore">没有更多了...</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import userApi from '../../common/userApi';
	import { format, hideLoading, showLoading, showToast, toDecimalNoZero } from '../../common/util';
	import { onLoad } from "@dcloudio/uni-app"
	import QRCode from '../../common/qrcode';
	let pageId = ''
	let rTime = ''
	onLoad((options) => {
		pageId = options.id;
		rTime = options.rTime;
	})

	const isLoading = ref(false)
	const notMore = ref(true)
	const pageList = ref([])
	let longitude = 0//30.657401
	let latitude = 0//104.065861
	onMounted(async () => {
		showLoading()
		uni.getLocation({
			geocode: true,
			altitude: true,
			accuracy: 'best',
			isHighAccuracy: true,
			success: (res) => {
				hideLoading()
				if (res) {
					longitude = res.longitude
					latitude = res.latitude
					getPageData()
				}
			},
			fail: (err) => {
				hideLoading()
				showToast('没有定位权限，系统无法为您显示门店距离', {}, () => {
					getPageData()
				})
			}
		})
	})

	const pageData = ref<any>({})
	const qrcodeInfo = ref('')
	const getPageData = async () => {
		showLoading()
		isLoading.value = true
		try {

			const res = await userApi.findCouponDetail({
				couponId: pageId,
				longitude: longitude || '',
				latitude: latitude || ''
			})
			const ocanvas = uni.createOffscreenCanvas({ type: "2d" })
			pageList.value = res.data.couponApplyStores || []
			pageData.value = res.data
			const base64 = await (QRCode as any).toDataURL(ocanvas, res.data.couponCode, {
				width: 200,
				errorCorrectionLevel: 'H'
			});
			qrcodeInfo.value = base64

		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const getValidTime = () => {
		const item = pageData.value

		let sTime = '';
		let eTime = '';
		if (item.validityType === 2) {
			//有效期天数
			let timeNum = new Date(rTime).getTime()
			timeNum += item.validityDays * 24 * 60 * 60 * 1000
			sTime = format(rTime, 'yyyy-MM-dd 00:00')
			eTime = format(timeNum, 'yyyy-MM-dd 23:59')
			return sTime + '至' + eTime
		} else if (item.validityType === 1) {
			sTime = format(item.validityStartTime, 'yyyy-MM-dd 00:00')
			eTime = format(item.validityEndTime, 'yyyy-MM-dd 23:59')
			return sTime + '至' + eTime
		}
	}
	const getDistance = (num) => {
		if (num > 1000) {
			return toDecimalNoZero(num / 1000) + 'km'
		} else {
			return num + 'm'
		}
	}
	const openLocation = (item) => {
		//if (!latitude && !longitude) return
		const lat = item.siteCoordinate.latitude
		const lng = item.siteCoordinate.longitude
		uni.openLocation({
			name: item.name,
			latitude: Number(lat),
			longitude: Number(lng)
		})
	}
</script>

<style lang="scss">
	.coupon-detail-container {
		padding: 25rpx;
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);

		.page-status {
			font-size: 40rpx;
			color: #202020;
			font-weight: bold;
		}

		.page-date {
			font-size: 24rpx;
			color: #383838;
			margin-top: 10rpx;
		}

		.qrcode-panel {
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 25rpx 25rpx 30rpx 25rpx;
		}

		.panel-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #202020;
		}

		.qr-img {
			width: 380rpx;
			height: 380rpx;
			display: block;
			margin: 40rpx auto;
		}

		.qr-code {
			font-size: 28rpx;
			color: #383838;
			font-weight: bold;
			text-align: center;
			margin-top: 20rpx;
		}

		.list-panel {
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 25rpx 25rpx 30rpx 25rpx;
		}

		.page-list {
			border-bottom: solid 1px rgba(232, 232, 232, 1);
			padding: 20rpx 0;
		}

		.list-top {
			display: flex;
			align-items: center;
		}

		.list-img {
			width: 148rpx;
			height: 148rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			border: solid 1px #f5f5f5;
		}

		.list-right {
			width: 50%;
			flex-grow: 1;
		}

		.list-title {
			font-size: 28rpx;
			color: #202020;
			font-weight: bold;
		}

		.list-info {
			font-size: 24rpx;
			margin: 10rpx 0;
			color: #383838;
		}

		.list-type {
			color: rgba(222, 147, 28, 1);
			display: inline-block;
			padding: 4rpx 8rpx;
			background-color: rgba(248, 169, 42, 0.2);
			transform-origin: 0 50%;
			transform: scale(0.9);
			border-radius: 8rpx;
		}

		.list-addr {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.list-addrinfo {
			color: #3AD3C1;
			font-size: 24rpx;
			transform-origin: 0 50%;
			transform: scale(0.9);
		}

		.list-addrdist {
			transform-origin: 100% 50%;
			transform: scale(0.9);
		}

		.list-bottom {
			font-size: 24rpx;
			color: #383838;
			margin-top: 20rpx;
		}
	}
</style>